<template>

	<u-tabbar :border='false' :value="getTabValue" @change="change" activeColor='#FF594D' inactiveColor="#D4D4D4"
		:fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
		<template v-for="(item,index) in tabList">
			<u-tabbar-item :key="index">
				<view @click="click" class="tabbar-item current" slot="active-icon">
					<image :src="item.active" mode=""></image>
					{{item.text}}
				</view>
				<view class="tabbar-item" slot="inactive-icon">
					<image :src="item.inactive" mode=""></image>
					{{item.text}}
				</view>
			</u-tabbar-item>
		</template>
	</u-tabbar>
</template>

<script>
	import {
		mapMutations,
		mapGetters
	} from 'vuex'

	export default {
		name: "tab-bar",
		data() {
			return {
				value: 0,
				tabList: [{
					text: '首页',
					active: '../../static/images/tab-bar/Frame 363@2x.png',
					inactive: '../../static/images/tab-bar/Frame 364@2x.png'
				}, {
					text: '圈子',
					active: '../../static/images/tab-bar/Frame 366@2x.png',
					inactive: '../../static/images/tab-bar/Frame 365@2x.png'
				}, {
					text: '视频号',
					active: '../../static/images/tab-bar/Frame 367@2x.png',
					inactive: '../../static/images/tab-bar/Frame 368@2x.png'
				}, {
					text: '购物车',
					active: '../../static/images/tab-bar/Frame 369@2x.png',
					inactive: '../../static/images/tab-bar/Frame 370@2x.png'
				}, {
					text: '我的',
					active: '../../static/images/tab-bar/Frame@2x.png',
					inactive: '../../static/images/tab-bar/Frame 372@2x.png',
				}]
			};

		},
		methods: {
			change(index) {
				this.value = index
				// console.log(index);
				this.setTabValue(index)
				switch (index) {
					case 0:
						uni.switchTab({
							url: '/pages/index/index'
						})
						break;
					case 1:
						uni.switchTab({
							url: '/pages/factionalism/factionalism'
						})
						break;
					case 2:
						uni.switchTab({
							url: '/pages/video-page/video-page'
						})
						break;
					case 3:
						uni.switchTab({
							url: '/pages/shopCar/shopCar'
						})
						break;
					case 4:
						uni.switchTab({
							url: `/pages/mine/mine?hash=${+new Date()}`
						})
						break;
					default:
						uni.showToast({
							title: "页面未开发"
						})
				}
			},
			click(e) {
				// console.log(e);
			},
			...mapMutations(['setTabValue'])
		},
		computed: {
			...mapGetters(['getTabValue'])
		}
	}
</script>

<style lang="scss">
	.tabbar-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		color: #d4d4d4;
		font-size: 22rpx;
		position: relative;

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.current {
		color: #FF594D;
	}
</style>